<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="Content-Language" content="zh-cn"/>
    <meta name="description" content="artDialog"/>
    <meta name="keywords" content="artDialog, dialog"/>
    <title>artDialog</title>
    <!--[if gte IE 7]><!-->
    <link id="artDialog-skin" href="./skins/green.css" rel="stylesheet"/>
    <!--<![endif]-->
    <!--[if lt IE 7]>
    <link id="artDialog-skin" href="./skins/default.css" rel="stylesheet"/>
    <![endif]-->
    <script src="source/artDialog.js" type="text/javascript"></script>
    <script type="text/javascript">
        (function (d) {
            d['okValue'] = '确定';
            d['cancelValue'] = '取消';
            d['title'] = '消息';
            // [more..]
        })(art.dialog.defaults);
    </script>
    <style type="text/css">
        body {
            font-size: 14px;
            color: #666;
            font-family: 'Microsoft Yahei', Tahoma, Arial !important;
            font-family: Tahoma, Arial;
            background: #dbdfe3;
        }

        a {
            color: #039;
        }

        a:hover {
            color: #06C;
        }

        img {
            border: none 0;
        }

        body.showChange .change {
            background: #FF0;
            border-radius: 3px;
        }

        h1.title {
            text-align: center;
            color: #30475e;
        }

        h1.title strong {
            font-size: 42px;
            position: relative;
        }

        h1.title strong:after {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            bottom: 24px;
            width: 90%;
            height: 1px;
            box-shadow: 0 20px 15px rgba(0, 0, 0, .8);
        }

        #header, #main, #footer {
            width: 640px;
            margin: auto;
        }

        #header .summary {
            padding: 20px;
            background: #30475e;
            color: #FFF;
            border-radius: 8px;
            zoom: 1;
        }

        #header .summary:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        #header .summary a {
            color: #FFF;
        }

        #header .summary a:hover {
            color: #CCC;
        }

        #header .summary strong {
            display: inline-block;
            width: 5em;
        }

        #header .summary dl {
            padding: 0;
            margin: 0;
        }

        #header .summary dd {
            margin-left: 0;
            padding: 3px 0;
        }

        #header .summary dt {
            display: none;
        }

        #header .summary dd.photo {
            float: right;
        }

        #header .summary img {
            border: 1px #506f8e solid;
        }

        #main .card {
            padding: 20px;
            margin-top: 30px;
            background: #FFF;
            border: 1px solid #d1d6db;
            border-radius: 8px;
        }

        #main .card:after {
            position: relative;
            z-index: -1;
            content: "";
            padding: 20px;
            display: block;
            height: 10px;
            border-radius: 10px;
            box-shadow: 0 20px 20px rgba(2, 37, 69, .6);
        }

        #main .card h2 {
            text-align: center;
            color: #000;
        }

        #main .card ul dl {
            padding-left: 1em;
            border-left: 1px dashed #DDD;
        }

        #main .card ul dt {
            padding: 8px 0;
            font-weight: bold;
        }

        #main .card ul dd {
            margin-left: 0;
        }

        #main .card ul dd dl {
            margin-left: 2em;
        }

        #footer {
            padding: 20px 0;
            text-align: center;
            color: #999;
        }

        #footer .copyright a {
            color: #999;
        }

        /*///// code /////*/
        .runCode:after {
            content: "...";
        }

        .button, .runCode {
            display: inline-block;
            padding: 1px 12px;
            text-decoration: none;
            color: #333 !important;
            cursor: pointer;
            border: solid 1px #999;
            border-radius: 5px;
            background: #DDD;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#DDDDDD');
            background: linear-gradient(top, #FFF, #DDD);
            background: -moz-linear-gradient(top, #FFF, #DDD);
            background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#DDD));
            text-shadow: 0px 1px 1px rgba(255, 255, 255, 1);
            box-shadow: 0 1px 0 rgba(255, 255, 255, .2), 0 -1px 0 rgba(0, 0, 0, .09);
            -moz-transition: -moz-box-shadow linear .2s;
            -webkit-transition: -webkit-box-shadow linear .2s;
            transition: box-shadow linear .2s;
            white-space: nowrap;
        }

        .button:focus, .runCode:focus {
            outline: none 0;
            border-color: #426DC9;
            box-shadow: 0 0 8px rgba(66, 109, 201, .9);
        }

        .button:hover, .runCode:hover {
            color: #000;
            border-color: #666;
        }

        .button:active, .runCode:active {
            border-color: #666;
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DDDDDD', endColorstr='#FFFFFF');
            background: linear-gradient(top, #DDD, #FFF);
            background: -moz-linear-gradient(top, #DDD, #FFF);
            background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DDD), to(#FFF));
            box-shadow: inset 0 1px 5px rgba(66, 109, 201, .9), inset 0 1px 1em rgba(0, 0, 0, .3);
        }

        .button[disabled] {
            cursor: default;
            color: #666;
            background: #DDD;
            border: 1px solid #999;
            filter: alpha(opacity=50);
            opacity: .5;
            box-shadow: none;
        }

        pre {
            position: relative;
            padding: 5px;
            font-size: 12px;
            border: 1px solid #EFEFEF;
            background: #F9F9F9;
            z-index: 2;
            border-radius: 5px;
        }

        pre:before, pre:after {
            visibility: hidden;
            display: block;
            content: "";
            width: 0;
            height: 0;
            border: 9px solid transparent;
            position: absolute;
        }

        pre:before {
            border-top-color: #EEF7F5;
            position: absolute;
            left: 18px;
            bottom: -18px;
            z-index: 2;
        }

        pre:after {
            border-top-color: #c7dcd3;
            left: 18px;
            bottom: -19px;
            z-index: 1;
        }

        pre.select {
            background: #EEF7F5 !important;
            border: 1px solid #D7EAE2;
            border-right-color: #c7dcd3;
            border-bottom-color: #c7dcd3;
        }

        pre.select:before, pre.select:after {
            visibility: visible;
        }

        /*//// skin ////*/
        #skins {
            width: 560px;
            padding: 8px 0;
        }

        #skins .button {
            width: 82px;
            text-align: center;
        }

        #skins ul, #skins li {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        #skins li {
            display: inline;
        }

        #skins ul {
            text-align: center;
        }

        #showChange {
            position: fixed;
            bottom: 0;
            right: 0;
            z-index: 87;
        }

        @media only screen and (max-width: 980px) {
            h1.title {
                font-size: 24px;
            }

            #header, #main, #footer {
                max-width: 100%;
            }

            img {
                max-width: 100%
            }
        }

        @media print {
            #header .summary, a {
                color: #000 !important;
            }

            #header, #main, #footer {
                width: auto;
            }

            #main .card {
                padding: 10px;
                margin-top: 10px;
                box-shadow: none;
                border: none 0;
                border-top: 1px dashed #666;
                border-radius: 0;
            }

            #main .card h2 {
                text-align: left;
            }

            #main .card:after {
                display: none;
            }

            h1.title strong:after, #index, #print, .runCode, .button, #skin-menu {
                display: none;
            }
        }
    </style>

    <!-- Dw 风格代码高亮 -->
    <style type="text/css">
        pre.sh_sourceCode {
            color: #000000;
            font-weight: normal;
            font-style: normal;
        }

        pre.sh_sourceCode .sh_keyword {
            color: #009;
            font-weight: bold;
            font-style: normal;
        }

        pre.sh_sourceCode .sh_type {
            color: #0000ff;
            font-weight: normal;
            font-style: normal;
        }

        pre.sh_sourceCode .sh_string {
            color: #00F;
            font-weight: normal;
            font-style: normal;
        }

        pre.sh_sourceCode .sh_regexp {
            color: #060;
            font-weight: normal;
            font-style: normal;
        }

        pre.sh_sourceCode .sh_specialchar {
            color: #C42DA8;
            font-weight: normal;
            font-style: normal;
        }

        pre.sh_sourceCode .sh_comment {
            color: #999;
            font-weight: normal;
            font-style: italic;
        }

        pre.sh_sourceCode .sh_number {
            color: #F00;
            font-weight: normal;
            font-style: normal;
        }

        pre.sh_sourceCode .sh_preproc {
            color: #00b800;
            font-weight: normal;
            font-style: normal;
        }

        pre.sh_sourceCode .sh_symbol {
            color: #009;
            font-weight: bold;
            font-style: normal;
        }

        pre.sh_sourceCode .sh_function {
            color: #000;
            font-weight: normal;
            font-style: normal;
        }

        pre.sh_sourceCode .sh_cbracket {
            color: #009;
            font-weight: bold;
            font-style: normal;
        }

        pre.sh_sourceCode .sh_url {
            color: #ff0000;
            font-weight: normal;
            font-style: normal;
        }

        pre.sh_sourceCode .sh_date {
            color: #0000ff;
            font-weight: bold;
            font-style: normal;
        }

        pre.sh_sourceCode .sh_time {
            color: #0000ff;
            font-weight: bold;
            font-style: normal;
        }

        pre.sh_sourceCode .sh_file {
            color: #0000ff;
            font-weight: bold;
            font-style: normal;
        }

        pre.sh_sourceCode .sh_ip {
            color: #ff0000;
            font-weight: normal;
            font-style: normal;
        }

        pre.sh_sourceCode .sh_name {
            color: #ff0000;
            font-weight: normal;
            font-style: normal;
        }

        pre.sh_sourceCode .sh_variable {
            color: #ec7f15;
            font-weight: normal;
            font-style: normal;
        }

        pre.sh_sourceCode .sh_oldfile {
            color: #C42DA8;
            font-weight: normal;
            font-style: normal;
        }

        pre.sh_sourceCode .sh_newfile {
            color: #ff0000;
            font-weight: normal;
            font-style: normal;
        }

        pre.sh_sourceCode .sh_difflines {
            color: #0000ff;
            font-weight: bold;
            font-style: normal;
        }

        pre.sh_sourceCode .sh_selector {
            color: #ec7f15;
            font-weight: normal;
            font-style: normal;
        }

        pre.sh_sourceCode .sh_property {
            color: #0000ff;
            font-weight: bold;
            font-style: normal;
        }

        pre.sh_sourceCode .sh_value {
            color: #ff0000;
            font-weight: normal;
            font-style: normal;
        }

        pre.sh_sourceCode .sh_predef_var {
            color: #909;
            font-weight: normal;
            font-style: normal;
        }

        pre.sh_sourceCode .sh_predef_func {
            color: #099;
            font-weight: normal;
            font-style: normal;
        }
    </style>
</head>

<body>
<div id="header">
    <h1 class="title"><strong>artDialog&#8482;</strong><span id="artVersion"></span></h1>
    <div class="summary" id="summary">
        <p>artDialog 是一个设计得十分巧妙的对话框组件，小巧身材却拥有丰富的接口与漂亮的外观。</p>
        <ul>
            <li>自适应内容</li>
            <li>优雅的接口</li>
            <li>细致的体验</li>
            <li>跨平台兼容</li>
            <li>信息无障碍</li>
        </ul>
        <p><strong>项目主页</strong>: <a href="https://github.com/aui/artDialog">https://github.com/aui/artDialog</a></p>
        <p id="skin-menu">对话框样式选择：<a id="showSkinDialog" class="button" href="javascript:;">green</a></p>
    </div>
</div>
<div id="main">
    <div id="index" class="card">
        <h2>文档索引</h2>
        <ul>
            <li>
                <h3><a href="#lead">快速上手</a></h3>
            </li>
            <li>
                <h3><a href="#options">配置参数</a></h3>
                <ul>
                    <li>
                        <h4>内容</h4>
                        <ul>
                            <li><a href="#options-title">title</a></li>
                            <li><a href="#options-content">content</a></li>
                        </ul>
                    </li>
                    <li>
                        <h4>按钮</h4>
                        <ul>
                            <li><a href="#options-ok" class="change">ok</a></li>
                            <li><a href="#options-cancel" class="change">cancel</a></li>
                            <li><a href="#options-okValue" class="change">okValue</a></li>
                            <li><a href="#options-cancelValue" class="change">cancelValue</a></li>
                            <li><a href="#options-button" class="change">button</a></li>
                        </ul>
                    </li>
                    <li>
                        <h4>尺寸</h4>
                        <ul>
                            <li><a href="#options-width">width</a></li>
                            <li><a href="#options-height">height</a></li>
                        </ul>
                    </li>
                    <li>
                        <h4>位置</h4>
                        <ul>
                            <li><a href="#options-fixed">fixed</a><a href="#width"></a></li>
                            <li><a href="#options-follow">follow</a><a href="#height"></a></li>
                        </ul>
                    </li>
                    <li>
                        <h4>视觉</h4>
                        <ul>
                            <li><a href="#options-lock">lock</a><a href="#fixed"></a><a href="#width"></a></li>
                            <li><a href="#options-padding">padding</a></li>
                        </ul>
                    </li>
                    <li>
                        <h4>高级</h4>
                        <ul>
                            <li><a href="#options-id">id</a></li>
                            <li><a href="#options-zIndex">zIndex</a></li>
                            <li><a href="#options-initialize" class="change">initialize</a></li>
                            <li><a href="#options-beforeunload" class="change">beforeunload</a></li>
                            <li><a href="#options-visible" class="change">visible</a></li>
                            <li><a href="#options-time" class="change">time</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <h3><a href="#api">接口</a></h3>
                <ul>
                    <li><a href="#api-get" class="change">art.dialog.get(id)</a></li>
                    <li><a href="#api-closed" class="change">closed</a></li>
                    <li><a href="#api-close">close()</a></li>
                    <li><a href="#api-visible" class="change">visible()</a></li>
                    <li><a href="#api-hidden" class="change">hidden()</a></li>
                    <li><a href="#api-title">title(value)</a></li>
                    <li><a href="#api-content">content(value)</a></li>
                    <li><a href="#api-button">button(button, button, ..)</a></li>
                    <li><a href="#api-follow">follow(element)</a></li>
                    <li><a href="#api-size">size(width, height)</a></li>
                    <li><a href="#api-lock">lock()</a></li>
                    <li><a href="#api-unlock">unlock()</a></li>
                    <li><a href="#api-time" class="change">time(value)</a></li>
                </ul>
            </li>
            <li>
                <h3><a href="#plugins">插件</a></h3>
            </li>
        </ul>
    </div>
    <div id="lead" class="card">
        <h2>快速上手</h2>
        <p>artDialog api 风格统一，有一定前端开发经验的同学通过阅读文档5分钟即可上手。
            <button id="showChange" class="button">高亮显示更改</button>
        </p>
        <h3>引入文件</h3>
        <p>在页面 head 引入 artDialog 样式与脚本文件:</p>
    <pre class="sh_javascript">&lt;link href="./skins/default.css" rel="stylesheet" /&gt;
&lt;script src="./artDialog.min.js"&gt;&lt;/script&gt;</pre>
        <p>如果使用jquery，引用jquery.artDialog.min.js即可，调用时请把 'art' 前缀替换成 '$'。</p>
        <h3>调用方式</h3>
        <p>artDialog 有两种调用方式，第一种是最简单的直接传入参数方式；第二种拥有更多的可选项，参见 <a href="#options">配置参数</a>。</p>
        <ol>
            <li>
                <p><strong>art.dialog</strong>(<em>content</em>, <em>[ok]</em>, <em>[cancel]</em>)</p>
        <pre class="sh_javascript" id="lead-demo-1">art.dialog('artDialog: I Love You!', function () {alert('Thank you!')});
  </pre>
                <a class="runCode" href="#lead-demo-1">运行</a></li>
            <li>
                <p><strong>art.dialog</strong>(<em>options</em>)</p>
        <pre class="sh_javascript" id="lead-demo-2">art.dialog({
    title: '欢迎',
    content: '欢迎使用artDialog对话框组件！',
    ok: function () {
        this
        .title('警告')
        .content('请注意artDialog两秒后将关闭！')
        .lock()
        .time(2000);
        return false;
    }
});
  </pre>
                <a class="runCode" href="#lead-demo-2">运行</a></li>
        </ol>

        <h3>扩展接口</h3>
        <p>除了上述两种调用方式之外，artDialog 还提供一些接口方便异步操作，比如实现外部程序更新对话框内容、关闭窗口等。这是属于高级操作，详情参见 <a href="#api">接口</a>。</p>
        <p>若无特别说明，扩展方法均支持链式调用。</p>
    </div>
    <div id="options" class="card">
        <h2>配置参数</h2>
        <ul>
            <li>
                <h3 id="options-title">title</h3>
                <dl>
                    <dt>概述</dt>
                    <dd> (默认值: "message") 标题内容</dd>
                    <dt>类型</dt>
                    <dd>String</dd>
                    <dt>示例</dt>
                    <dd>
            <pre id="options-title-demo" class="sh_javascript">art.dialog({
    title: 'hello world!'
});</pre>
                        <a class="runCode" href="#options-title-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="options-content">content</h3>
                <dl>
                    <dt>概述</dt>
                    <dd> (默认值: "&lt;div class="d-loading"&gt;&lt;span&gt;loading..&lt;/span&gt;&lt;/div&gt;")
                        设置消息内容。<br/>
                        <br/>
                        如果传入的是 HTMLElement
                        类型，如果是隐藏元素会给其设置display:block以显示该元素，其他属性与绑定的事件都会完整保留，对话框关闭后此元素又将恢复原来的display属性，并且重新插入原文档所在位置
                    </dd>
                    <dt>类型</dt>
                    <dd>String, HTMLElement</dd>
                    <dt>示例</dt>
                    <dd>
            <pre id="options-content-demo-string" class="sh_javascript">art.dialog({
    content: 'hello world!'
});</pre>
                        <a class="runCode" href="#options-content-demo-string">运行</a></dd>
                    <dd>
            <pre id="options-content-demo-element" class="sh_javascript">art.dialog({
    content: document.getElementById('options-content-demo-element'),
    id: 'EF893L'
});</pre>
                        <a class="runCode" href="#options-content-demo-element">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="options-ok"><span class="change">ok</span></h3>
                <dl>
                    <dt>概述</dt>
                    <dd>确定按钮。<br/>
                        <br/>
                        回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭
                    </dd>
                    <dt>类型</dt>
                    <dd>Function</dd>
                    <dt>示例</dt>
                    <dd>
            <pre id="options-ok-demo" class="sh_javascript">art.dialog({
    ok: function () {
        this.content('hello world!');
        return false;
    }
});</pre>
                        <a class="runCode" href="#options-ok-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="options-cancel"><span class="change">cancel</span></h3>
                <dl>
                    <dt>概述</dt>
                    <dd>取消按钮。<br/>
                        <br/>
                        取消按钮也等同于标题栏的关闭按钮。回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭
                    </dd>
                    <dt>类型</dt>
                    <dd>Function</dd>
                    <dt>示例</dt>
                    <dd>
            <pre id="options-cancel-demo" class="sh_javascript">art.dialog({
    cancel: function () {
        alert('关闭');
    }
});</pre>
                        <a class="runCode" href="#options-cancel-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="options-okValue"><span class="change">okValue</span></h3>
                <dl>
                    <dt>概述</dt>
                    <dd> (默认值: "ok") 确定按钮文本</dd>
                    <dt>类型</dt>
                    <dd>String</dd>
                    <dt>示例</dt>
                    <dd>
            <pre id="options-okValue-demo" class="sh_javascript">art.dialog({
    okValue: '猛击我',
    ok: function () {
        this.content('hello world!');
        return false;
    }
});</pre>
                        <a class="runCode" href="#options-okValue-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="options-cancelValue"><span class="change">cancelValue</span></h3>
                <dl>
                    <dt>概述</dt>
                    <dd> (默认值: cancel) 取消按钮文本</dd>
                    <dt>类型</dt>
                    <dd>String</dd>
                    <dt>示例</dt>
                    <dd>
            <pre id="options-cancelValue-demo" class="sh_javascript">art.dialog({
    cancelValue: '取消我',
    cancel: function () {
        alert('关闭');
    }
});</pre>
                        <a class="runCode" href="#options-cancelValue-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="options-button"><span class="change">button</span></h3>
                <dl>
                    <dt>概述</dt>
                    <dd>
                        <p>自定义按钮组。<br/>
                            <br/>
                            回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭</p>
                    </dd>
                    <dt>类型</dt>
                    <dd>Array</dd>
                    <dt>选项</dt>
                    <dd>
                        <dl>
                    <dt title="String"><span class="change">value</span></dt>
                    <dd>按钮显示文本</dd>
                    <dt title="Function">callback</dt>
                    <dd>(可选) 按钮点击后的回调函数。回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭</dd>
                    <dt title="Boolean">focus</dt>
                    <dd>(默认值: true) 是否聚焦</dd>
                    <dt title="String"><span class="change">width</span></dt>
                    <dd>(可选) 设置按钮 CSS width 值</dd>
                    <dt title="Boolean">disabled</dt>
                    <dd>(默认值: false) 是否禁用</dd>
                    <dt title="String"><span class="change">id</span></dt>
                    <dd>(默认值: 与 value 一致) 唯一标识</dd>
                </dl>
                </dd>
                <dt>示例</dt>
                <dd>
            <pre id="options-button-demo" class="sh_javascript">art.dialog({
    button: [
        {
            value: '同意',
            callback: function () {
                this
                .content('你同意了')
                .button({
                    id: 'button-disabled',
                    value: '我变成有效按钮了',
                    disabled: false
                 });
                return false;
            },
            focus: true
        },
        {
            value: '不同意',
            callback: function () {
                alert('你不同意')
            }
        },
        {
            id: 'button-disabled',
            value: '无效按钮',
            disabled: true
        },
        {
            value: '关闭我'
        }
    ]
});</pre>
                    <a class="runCode" href="#options-button-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="options-width">width</h3>
                <dl>
                    <dt>概述</dt>
                    <dd>(默认值: "auto") 设置对话框 <strong>内容</strong> 宽度。<br/>
                        <br/>
                        一般情况下无需设置此值，对话框会自适应内容宽度
                    </dd>
                    <dt>类型</dt>
                    <dd>Number, String</dd>
                    <dt>示例</dt>
                    <dd>
            <pre id="options-width-demo" class="sh_javascript">art.dialog({
    width: 460
});</pre>
                        <a class="runCode" href="#options-width-demo">运行</a></dd>
                    <dd>
            <pre id="options-width-demo-string" class="sh_javascript">art.dialog({
    width: '20em'
});</pre>
                        <a class="runCode" href="#options-width-demo-string">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="options-height">height</h3>
                <dl>
                    <dt>概述</dt>
                    <dd>(默认值: "auto") 设置对话框 <strong>内容</strong> 高度。<br/>
                        <br/>
                        一般情况下无需设置此值，对话框会自适应内容宽度
                    </dd>
                    <dt>类型</dt>
                    <dd>Number, String</dd>
                    <dt>示例</dt>
                    <dd>
            <pre id="options-height-demo" class="sh_javascript">art.dialog({
    height: 460
});</pre>
                        <a class="runCode" href="#options-height-demo">运行</a></dd>
                    <dd>
            <pre id="options-height-demo-string" class="sh_javascript">art.dialog({
    height: '20em'
});</pre>
                        <a class="runCode" href="#options-height-demo-string">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="options-fixed">fixed</h3>
                <dl>
                    <dt>概述</dt>
                    <dd>(默认值: false) 开启固定定位。<br/>
                        <br/>
                        固定定位是 css2.1 position 的一个属性，它能固定在浏览器某个地方，也不受滚动条拖动影响。IE6 与 部分移动浏览器对其支持不好，内部会转成绝对定位
                    </dd>
                    <dt>类型</dt>
                    <dd>Boolean</dd>
                    <dt>示例</dt>
                    <dd>
            <pre id="options-fixed-demo" class="sh_javascript">art.dialog({
    fixed: true,
    content: '请拖动滚动条查看'
});</pre>
                        <a class="runCode" href="#options-fixed-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="options-follow">follow</h3>
                <dl>
                    <dt>概述</dt>
                    <dd>让对话框依附在指定元素附近</dd>
                    <dt>类型</dt>
                    <dd>HTMLElement</dd>
                    <dt>示例</dt>
                    <dd>
            <pre id="options-follow-demo" class="sh_javascript">art.dialog({
    follow: document.getElementById('options-follow-demo-runCode'),
    content: '让对话框跟着某个元素，一个元素同时只能出现一个对话框'
});</pre>
                        <a id="options-follow-demo-runCode" class="runCode" href="#options-follow-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="options-lock">lock</h3>
                <dl>
                    <dt>概述</dt>
                    <dd>(默认值: false) 开启锁屏遮罩。<br/>
                        <br/>
                        中断用户对话框之外的交互，用于显示非常重要的操作/消息。建议只在适合的时候使用它。遮罩的颜色与透明度可在皮肤CSS中设置。
                    </dd>
                    <dt>类型</dt>
                    <dd>Boolean</dd>
                    <dt>示例</dt>
                    <dd>
            <pre id="options-lock-demo" class="sh_javascript">art.dialog({
    lock: true
});</pre>
                        <a class="runCode" href="#options-lock-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="options-padding">padding</h3>
                <dl>
                    <dt>概述</dt>
                    <dd>(默认值: "20px 25px") 设置消息内容与消息容器的填充边距，即 style padding 属性</dd>
                    <dt>类型</dt>
                    <dd>String</dd>
                    <dt>示例</dt>
                    <dd>
            <pre id="options-padding-demo" class="sh_javascript">art.dialog({
    content: 'hello world',
    padding: 0
})</pre>
                        <a class="runCode" href="#options-padding-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="options-id">id</h3>
                <dl>
                    <dt>概述</dt>
                    <dd>设定对话框唯一标识。<br/>
                        <br/>
                        作用：
                        <ol>
                            <li>可防止重复 ID 对话框弹出</li>
                            <li>可后续使用 <a href="#api-get">art.dialog.<strong>get</strong>(id)</a> 获取某个对话框的接口</li>
                        </ol>
                    </dd>
                    <dt>类型</dt>
                    <dd>String</dd>
                    <dt>示例</dt>
                    <dd>
            <pre id="options-id-demo" class="sh_javascript">art.dialog({
    id: 'id-demo',
    content: '再次点击运行看看'
});
art.dialog.get('id-demo').title('8888888888');</pre>
                        <a class="runCode" href="#options-id-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="options-zIndex">zIndex</h3>
                <dl>
                    <dt>概述</dt>
                    <dd>(默认值: 1987) 重置全局 zIndex 初始值，用来改变对话框叠加高度。<br/>
                        <br/>
                        比如有时候配合外部浮动层UI组件，但是它们可能默认 zIndex 没有 artDialog 高，导致无法浮动到 artDialog 之上，这个时候你就可以给对话框指定一个较小的 zIndex
                        值。
                        请注意这是一个会影响到全局的配置，后续出现的对话框叠加高度将重新按此累加。
                    </dd>
                    <dt>类型</dt>
                    <dd>Number</dd>
                    <dt>示例</dt>
                    <dd>
            <pre id="options-zIndex-demo" class="sh_javascript">art.dialog({
    zIndex: 87
});</pre>
                        <a class="runCode" href="#options-zIndex-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="options-initialize"><span class="change">initialize</span></h3>
                <dl>
                    <dt>概述</dt>
                    <dd>对话框初始化完成后执行的函数。<br/>
                        <br/>
                        回调函数 this 指向 art.dialog 对象
                    </dd>
                    <dt>类型</dt>
                    <dd>Function</dd>
                    <dt>示例</dt>
                    <dd>
            <pre id="options-initialize-demo" class="sh_javascript">art.dialog({
    initialize: function () {
        this.content('对话框初始化完成');
    }
});</pre>
                        <a class="runCode" href="#options-initialize-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="options-beforeunload"><span class="change">beforeunload</span></h3>
                <dl>
                    <dt>概述</dt>
                    <dd>对话框关闭前执行的函数。<br/>
                        <br/>
                        回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭
                    </dd>
                    <dt>类型</dt>
                    <dd>Function</dd>
                    <dt>示例</dt>
                    <dd>
            <pre id="options-beforeunload-demo" class="sh_javascript">art.dialog({
    beforeunload: function () {
        return confirm('确定关闭对话框吗');
    }
});</pre>
                        <a class="runCode" href="#options-beforeunload-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="options-visible"><span class="change">visible</span></h3>
                <dl>
                    <dt>概述</dt>
                    <dd>(默认值: true) 是否显示对话框</dd>
                    <dt>类型</dt>
                    <dd>Boolean</dd>
                    <dt>示例</dt>
                    <dd>
            <pre id="options-visible-demo" class="sh_javascript">var dialog = art.dialog({
    visible: false,
    id: 'visible-demo'
});

confirm('显示对话框吗') ? dialog.visible() : dialog.hidden();</pre>
                        <a class="runCode" href="#options-visible-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="options-time"><span class="change">time</span></h3>
                <dl>
                    <dt>概述</dt>
                    <dd>设置对话框显示时间，超过时间自动关闭 (单位：<span class="change">毫秒</span>)</dd>
                    <dt>类型</dt>
                    <dd>Number</dd>
                    <dt>示例</dt>
                    <dd>
            <pre id="options-time-demo" class="sh_javascript">art.dialog({
    time: 2000
});</pre>
                        <a class="runCode" href="#options-time-demo">运行</a></dd>
                </dl>
            </li>
        </ul>
    </div>
    <div id="api" class="card">
        <h2>接口</h2>
        <ul>
            <li>
                <h3 id="api-get"><span class="change">art.dialog.get(id)</span></h3>
                <dl>
                    <dt>概述</dt>
                    <dd>根据 id 获取 art.dialog 对象。<strong>注意</strong>：这是一个静态方法</dd>
                    <dt>参数</dt>
                    <dd>
                        <dl>
                    <dt title="String">id</dt>
                    <dd>对话框 id</dd>
                </dl>
                </dd>
                <dt>返回值</dt>
                <dd>如果存在 id 参数则返回 art.dialog 对象，否则返回页面所有 art.dialog 对象数组</dd>
                <dt>示例</dt>
                <dd>
            <pre id="api-get-demo" class="sh_javascript">art.dialog({
    id: 'demo-get'
});

var dialog = art.dialog.get('demo-get');
dialog.title('hello').content('I Love You!');
</pre>
                    <a class="runCode" href="#api-get-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="api-closed"><span class="change">closed</span></h3>
                <dl>
                    <dt>概述</dt>
                    <dd>对话框是否已经关闭。<strong>注意</strong>：这是一个属性，对话框若关闭其值为 true</dd>
                    <dt>示例</dt>
                    <dd>
            <pre id="api-closed-demo" class="sh_javascript">var dialog = art.dialog();

dialog.close();

alert(dialog.closed);
</pre>
                        <a class="runCode" href="#api-closed-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="api-close">close()</h3>
                <dl>
                    <dt>概述</dt>
                    <dd>关闭对话框</dd>
                    <dt>示例</dt>
                    <dd>
            <pre id="api-close-demo" class="sh_javascript">var dialog = art.dialog({
    content: 'hello world!'
});

if (confirm('关闭对话框吗')) {
    dialog.close();
};
</pre>
                        <a class="runCode" href="#api-close-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="api-visible"><span class="change">visible()</span></h3>
                <dl>
                    <dt>概述</dt>
                    <dd>把隐藏的对话框显示</dd>
                    <dt>示例</dt>
                    <dd>
            <pre id="api-visible-demo" class="sh_javascript">var dialog = art.dialog({
    visible: false
});

dialog.visible();</pre>
                        <a class="runCode" href="#api-visible-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="api-hidden"><span class="change">hidden()</span></h3>
                <dl>
                    <dt>概述</dt>
                    <dd>隐藏对话框</dd>
                    <dt>示例</dt>
                    <dd>
            <pre id="api-hidden-demo" class="sh_javascript">var dialog = art.dialog();

dialog.hidden();</pre>
                        <a class="runCode" href="#api-hidden-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="api-title">title(value)</h3>
                <dl>
                    <dt>概述</dt>
                    <dd>设置对话框标题</dd>
                    <dt>参数</dt>
                    <dd>
                        <dl>
                    <dt title="String">value</dt>
                    <dd>标题内容</dd>
                </dl>
                </dd>
                <dt>示例</dt>
                <dd>
            <pre id="api-title-demo" class="sh_javascript">var dialog = art.dialog({
    title: '请等待..'
});

dialog.title('欢迎使用');</pre>
                    <a class="runCode" href="#api-title-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="api-content">content(value)</h3>
                <dl>
                    <dt>概述</dt>
                    <dd>设置消息内容</dd>
                    <dt>参数</dt>
                    <dd>
                        <dl>
                    <dt title="String, HTMLElement">value</dt>
                    <dd>消息内容</dd>
                </dl>
                </dd>
                <dt>示例</dt>
                <dd>
            <pre id="api-content-demo" class="sh_javascript">var dialog = art.dialog();

dialog.content('加载完成！');</pre>
                    <a class="runCode" href="#api-content-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="api-button">button(button, [button], ..)</h3>
                <dl>
                    <dt>概述</dt>
                    <dd>添加或者修改一个或者多个按钮</dd>
                    <dt>参数</dt>
                    <dd>
                        <dl>
                    <dt title="Options">button</dt>
                    <dd>按钮配置</dd>
                </dl>
                </dd>
                <dt>选项</dt>
                <dd>
                    <dl>
                <dt title="String"><span class="change">value</span></dt>
                <dd>按钮显示文本</dd>
                <dt title="Function">callback</dt>
                <dd>(可选) 按钮点击后的回调函数。回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭</dd>
                <dt title="Boolean">focus</dt>
                <dd>(默认值: true) 是否聚焦</dd>
                <dt title="String"><span class="change">width</span></dt>
                <dd>(可选) 设置按钮 CSS width 值</dd>
                <dt title="Boolean">disabled</dt>
                <dd>(默认值: false) 是否禁用</dd>
                <dt title="String"><span class="change">id</span></dt>
                <dd>(默认值: 与 value 一致) 唯一标识</dd>
                </dl>
                </dd>
                <dt>示例</dt>
                <dd>
                    <p>修改按钮与新增按钮：</p>
            <pre id="api-button-demo" class="sh_javascript">var dialog = art.dialog({
    button: [{
        value: '增加一个按钮',
        focus: true,
        callback: function () {
            this.button({
                value: '关闭我'
            });
            return false;
        }
    }, {
        id: 'button',
        value: '提交 (5)',
        width: '8em',
        callback: function () {
            alert(0);
            return false;
        },
        disabled: true
    }]
});

var i = 5;
var timer = setInterval(function () {
    i--;
    
    dialog.button({
        id: 'button',
        value: '提交 (' + i + ')',
        disabled: true
    });
    
    if (i === 0) {
        clearInterval(timer);
        dialog.button({
            id: 'button',
            value: '提交',
            disabled: false
        });
    };
}, 1000);</pre>
                    <a class="runCode" href="#api-button-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="api-follow">follow(element)</h3>
                <dl>
                    <dt>概述</dt>
                    <dd>让对话框依附在指定元素附近</dd>
                    <dt>参数</dt>
                    <dd>
                        <dl>
                    <dt title="HTMLElement">element</dt>
                    <dd>元素</dd>
                </dl>
                </dd>
                <dt>示例</dt>
                <dd>
            <pre id="api-follow-demo" class="sh_javascript">var dialog = art.dialog();

dialog.follow(document.getElementById('api-follow-demo-runCode'));</pre>
                    <a id="api-follow-demo-runCode" class="runCode" href="#api-follow-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="api-size">size(width, height)</h3>
                <dl>
                    <dt>概述</dt>
                    <dd>指定对话框内容尺寸</dd>
                    <dt>参数</dt>
                    <dd>
                        <dl>
                    <dt title="Number, String">width</dt>
                    <dd>内容宽度</dd>
                    <dt title="Number, String">height</dt>
                    <dd>内容高度</dd>
                </dl>
                </dd>
                <dt>示例</dt>
                <dd>
            <pre id="api-size-demo" class="sh_javascript">var dialog = art.dialog();

dialog.size('20em', 60);</pre>
                    <a class="runCode" href="#api-size-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="api-lock">lock()</h3>
                <dl>
                    <dt>概述</dt>
                    <dd>开启锁屏遮罩</dd>
                    <dt>示例</dt>
                    <dd>
            <pre id="api-lock-demo" class="sh_javascript">var dialog = art.dialog();

dialog.lock();</pre>
                        <a class="runCode" href="#api-lock-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="api-unlock">unlock()</h3>
                <dl>
                    <dt>概述</dt>
                    <dd>关闭锁屏遮罩</dd>
                    <dt>示例</dt>
                    <dd>
            <pre id="api-unlock-demo" class="sh_javascript">var dialog = art.dialog({
    lock: true
});

dialog.unlock();</pre>
                        <a class="runCode" href="#api-unlock-demo">运行</a></dd>
                </dl>
            </li>
            <li>
                <h3 id="api-time"><span class="change">time(value)</span></h3>
                <dl>
                    <dt>概述</dt>
                    <dd>设置对话框显示时间，超过时间自动关闭 (单位：<span class="change">毫秒</span>)</dd>
                    <dt>参数</dt>
                    <dd>
                        <dl>
                    <dt title="Number"><span class="change">value</span></dt>
                    <dd>毫秒</dd>
                </dl>
                </dd>
                <dt>示例</dt>
                <dd>
            <pre id="api-time-demo" class="sh_javascript">var dialog = art.dialog();

dialog.time(2000);</pre>
                    <a class="runCode" href="#api-time-demo">运行</a></dd>
                </dl>
            </li>
        </ul>
    </div>
    <div id="plugins" class="card">
        <h2>插件</h2>
        <p>artDialog 可以通过插件支持拖动、抖动效果， alert、confirm、prompt 方法。只需在 artDialog 之后引用如下文件即可：</p>
    <pre class="sh_javascript">
&lt;script src="./artDialog.plugins.min.js"&gt;&lt;/script&gt;</pre>
        <p>
            <button id="getPlugins" class="button">加载插件</button>
        </p>
        <div id="plugins-demos">
            <h3>演示插件</h3>
            <ul>
                <li>
                    <h3 id="plugins-alert">art.alert(content, [callback])</h3>
          <pre id="plugins-alert-demo" class="sh_javascript">art.alert('那些年，我们一起追的女孩');
</pre>
                    <a class="runCode" href="#plugins-alert-demo">运行</a></li>
                <li>
                    <h3 id="plugins-confirm">art.confirm(content, ok, [cancel])</h3>
          <pre id="plugins-confirm-demo" class="sh_javascript">art.confirm('你再也不相信爱情了么？', function () {
    alert(0);
}, function () {
    alert(1);
});
</pre>
                    <a class="runCode" href="#plugins-confirm-demo">运行</a></li>
                <li>
                    <h3 id="plugins-prompt">art.prompt(content, ok, [defaultValue])</h3>
          <pre id="plugins-prompt-demo" class="sh_javascript">art.prompt('你的名字是什么？', function (value) {
    alert(value);
}, '糖饼');
</pre>
                    <a class="runCode" href="#plugins-prompt-demo">运行</a></li>
                <li>
                    <h3 id="plugins-shake">shake()</h3>
          <pre id="plugins-shake-demo" class="sh_javascript">art.dialog({
    id: 'shake-demo',
    title: '登录',
    content: '帐号：&lt;input id="login-na" type="text" value="guest" /&gt;'
        + '&lt;br /&gt;密码：&lt;input id="login-pw" type="text" value="****" /&gt;',
    initialize: function () {
        document.getElementById('login-na').focus();
    },
    lock: true,
    fixed: true,
    ok: function () {
        var pw = document.getElementById('login-pw');
        pw.select();
      pw.focus();
      this.shake();
        return false;
    },
    okValue: '登录',
    cancel: function () {}
});</pre>
                    <a class="runCode" href="#plugins-shake-demo">运行</a></li>
            </ul>
        </div>
    </div>
    <div id="donate" class="card">
        <p>artDialog 自从 2009 第一个版本到现在，这期间进行了很多次重构，因为作者相信：只要用心，哪怕一个小玩意都可以做到极致。</p>
        <p>若喜欢 artDialog，期待小额资金捐赠以支持开源 :-) <a href="https://me.alipay.com/planeart">https://me.alipay.com/planeart</a>
        </p>
    </div>
</div>
<div id="footer">
    <p class="time">(本文档于 2013-02-20 更新) <a id="print" href="#header">打印</a></p>
    <p class="copyright">&copy; 2009-2013 TangBin, <a href="http://www.planeart.cn">planeArt.cn</a></p>
    <p class="validators"><a href="http://validator.w3.org/check?uri=referer"><img
            src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88"/></a></p>
</div>
<!-- //////////// -->
<div id="skins" style="display:none">
    <ul id="skins-list">
        <li><a class="button" href="javascript:;">default</a></li>
        <li><a class="button" href="javascript:;">aero</a></li>
        <li><a class="button" href="javascript:;">chrome</a></li>
        <li><a class="button" href="javascript:;">opera</a></li>
        <li><a class="button" href="javascript:;">simple</a></li>
        <li><a class="button" href="javascript:;">idialog</a></li>
        <li><a class="button" href="javascript:;">twitter</a></li>
        <li><a class="button" href="javascript:;">blue</a></li>
        <li><a class="button" href="javascript:;">black</a></li>
        <li><a class="button" href="javascript:;">green</a></li>
    </ul>
    <div id="skins-dialog-content">
        <p style="text-align:center">备注：带阴影的效果的皮肤不被IE6支持。可使用渐进增强方式 <a href="javascript:;"
                                                                      onclick="document.getElementById('skins-ie6').style.display='block';return false">解决[+]</a>
        </p>
    <pre id="skins-ie6" class="sh_javascript" style="display:none">&lt;!--[if gte IE 7]&gt;&lt;!--&gt;
    &lt;link href="./skins/aero.css" rel="stylesheet" /&gt;
&lt;!--&lt;![endif]--&gt;
&lt;!--[if lt IE 7]&gt;
    &lt;link href="./skins/default.css" rel="stylesheet" /&gt;
&lt;![endif]--&gt;</pre>
    </div>
</div>
<script type="text/javascript">(function () {
//<![CDATA[
    /*
     SHJS - Syntax Highlighting in JavaScript
     Copyright (C) 2007, 2008 gnombat@users.sourceforge.net
     License: http://shjs.sourceforge.net/doc/gplv3.html
     */
    var sh_languages = {};

    function sh_isEmailAddress(a) {
        return /^mailto:/.test(a) ? !1 : a.indexOf("@") !== -1
    }

    function sh_setHref(a, b, c) {
        var d = c.substring(a[b - 2].pos, a[b - 1].pos);
        d.length >= 2 && d.charAt(0) === "<" && d.charAt(d.length - 1) === ">" && (d = d.substr(1, d.length - 2)), sh_isEmailAddress(d) && (d = "mailto:" + d), a[b - 2].node.href = d
    }

    function sh_konquerorExec(a) {
        var b = [""];
        return b.index = a.length, b.input = a, b
    }

    function sh_highlightString(a, b) {
        if (/Konqueror/.test(navigator.userAgent) && !b.konquered) {
            for (var c = 0; c < b.length; c++)for (var d = 0; d < b[c].length; d++) {
                var e = b[c][d][0];
                e.source === "$" && (e.exec = sh_konquerorExec)
            }
            b.konquered = !0
        }
        var f = document.createElement("a"), g = document.createElement("span"), h = [], i = 0, j = [], k = 0, l = null, m = function (b, c) {
            var d = b.length;
            if (d === 0)return;
            if (!c) {
                var e = j.length;
                if (e !== 0) {
                    var m = j[e - 1];
                    m[3] || (c = m[1])
                }
            }
            if (l !== c) {
                l && (h[i++] = {pos: k}, l === "sh_url" && sh_setHref(h, i, a));
                if (c) {
                    var n;
                    c === "sh_url" ? n = f.cloneNode(!1) : n = g.cloneNode(!1), n.className = c, h[i++] = {
                        node: n,
                        pos: k
                    }
                }
            }
            k += d, l = c
        }, n = /\r\n|\r|\n/g;
        n.lastIndex = 0;
        var o = a.length;
        while (k < o) {
            var p = k, q, r, s = n.exec(a);
            s === null ? (q = o, r = o) : (q = s.index, r = n.lastIndex);
            var t = a.substring(p, q), u = [];
            for (; ;) {
                var v = k - p, w, x = j.length;
                x === 0 ? w = 0 : w = j[x - 1][2];
                var y = b[w], z = y.length, A = u[w];
                A || (A = u[w] = []);
                var B = null, C = -1;
                for (var D = 0; D < z; D++) {
                    var E;
                    if (D < A.length && (A[D] === null || v <= A[D].index))E = A[D]; else {
                        var F = y[D][0];
                        F.lastIndex = v, E = F.exec(t), A[D] = E
                    }
                    if (E !== null && (B === null || E.index < B.index)) {
                        B = E, C = D;
                        if (E.index === v)break
                    }
                }
                if (B === null) {
                    m(t.substring(v), null);
                    break
                }
                B.index > v && m(t.substring(v, B.index), null);
                var G = y[C], H = G[1], I;
                if (H instanceof Array)for (var J = 0; J < H.length; J++)I = B[J + 1], m(I, H[J]); else I = B[0], m(I, H);
                switch (G[2]) {
                    case-1:
                        break;
                    case-2:
                        j.pop();
                        break;
                    case-3:
                        j.length = 0;
                        break;
                    default:
                        j.push(G)
                }
            }
            l && (h[i++] = {pos: k}, l === "sh_url" && sh_setHref(h, i, a), l = null), k = r
        }
        return h
    }

    function sh_getClasses(a) {
        var b = [], c = a.className;
        if (c && c.length > 0) {
            var d = c.split(" ");
            for (var e = 0; e < d.length; e++)d[e].length > 0 && b.push(d[e])
        }
        return b
    }

    function sh_addClass(a, b) {
        var c = sh_getClasses(a);
        for (var d = 0; d < c.length; d++)if (b.toLowerCase() === c[d].toLowerCase())return;
        c.push(b), a.className = c.join(" ")
    }

    function sh_extractTagsFromNodeList(a, b) {
        var c = a.length;
        for (var d = 0; d < c; d++) {
            var e = a.item(d);
            switch (e.nodeType) {
                case 1:
                    if (e.nodeName.toLowerCase() === "br") {
                        var f;
                        /MSIE/.test(navigator.userAgent) ? f = "\r" : f = "\n", b.text.push(f), b.pos++
                    } else b.tags.push({
                        node: e.cloneNode(!1),
                        pos: b.pos
                    }), sh_extractTagsFromNodeList(e.childNodes, b), b.tags.push({pos: b.pos});
                    break;
                case 3:
                case 4:
                    b.text.push(e.data), b.pos += e.length
            }
        }
    }

    function sh_extractTags(a, b) {
        var c = {};
        return c.text = [], c.tags = b, c.pos = 0, sh_extractTagsFromNodeList(a.childNodes, c), c.text.join("")
    }

    function sh_mergeTags(a, b) {
        var c = a.length;
        if (c === 0)return b;
        var d = b.length;
        if (d === 0)return a;
        var e = [], f = 0, g = 0;
        while (f < c && g < d) {
            var h = a[f], i = b[g];
            h.pos <= i.pos ? (e.push(h), f++) : (e.push(i), b[g + 1].pos <= h.pos ? (g++, e.push(b[g]), g++) : (e.push({pos: h.pos}), b[g] = {
                node: i.node.cloneNode(!1),
                pos: h.pos
            }))
        }
        while (f < c)e.push(a[f]), f++;
        while (g < d)e.push(b[g]), g++;
        return e
    }

    function sh_insertTags(a, b) {
        var c = document, d = document.createDocumentFragment(), e = 0, f = a.length, g = 0, h = b.length, i = d;
        while (g < h || e < f) {
            var j, k;
            e < f ? (j = a[e], k = j.pos) : k = h;
            if (k <= g) {
                if (j.node) {
                    var l = j.node;
                    i.appendChild(l), i = l
                } else i = i.parentNode;
                e++
            } else i.appendChild(c.createTextNode(b.substring(g, k))), g = k
        }
        return d
    }

    function sh_highlightElement(a, b) {
        sh_addClass(a, "sh_sourceCode");
        var c = [], d = sh_extractTags(a, c), e = sh_highlightString(d, b), f = sh_mergeTags(c, e), g = sh_insertTags(f, d);
        while (a.hasChildNodes())a.removeChild(a.firstChild);
        a.appendChild(g)
    }

    function sh_getXMLHttpRequest() {
        if (window.ActiveXObject)return new ActiveXObject("Msxml2.XMLHTTP");
        if (window.XMLHttpRequest)return new XMLHttpRequest;
        throw"No XMLHttpRequest implementation available"
    }

    function sh_load(language, element, prefix, suffix) {
        if (language in sh_requests) {
            sh_requests[language].push(element);
            return
        }
        sh_requests[language] = [element];
        var request = sh_getXMLHttpRequest(), url = prefix + "sh_" + language + suffix;
        request.open("GET", url, !0), request.onreadystatechange = function () {
            if (request.readyState === 4)try {
                if (!!request.status && request.status !== 200)throw"HTTP error: status " + request.status;
                eval(request.responseText);
                var elements = sh_requests[language];
                for (var i = 0; i < elements.length; i++)sh_highlightElement(elements[i], sh_languages[language])
            } finally {
                request = null
            }
        }, request.send(null)
    }

    function sh_highlightDocument(a, b) {
        var c = document.getElementsByTagName("pre");
        for (var d = 0; d < c.length; d++) {
            var e = c.item(d), f = sh_getClasses(e);
            for (var g = 0; g < f.length; g++) {
                var h = f[g].toLowerCase();
                if (h === "sh_sourcecode")continue;
                if (h.substr(0, 3) === "sh_") {
                    var i = h.substring(3);
                    if (i in sh_languages)sh_highlightElement(e, sh_languages[i]); else if (typeof a == "string" && typeof b == "string")sh_load(i, e, a, b); else throw'Found <pre> element with class="' + h + '", but no such language exists';
                    break
                }
            }
        }
    }

    var sh_requests = {};
    sh_languages.javascript = [[[/\/\/\//g, "sh_comment", 1], [/\/\//g, "sh_comment", 7], [/\/\*\*/g, "sh_comment", 8], [/\/\*/g, "sh_comment", 9], [/\b(?:abstract|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|final|finally|for|function|goto|if|implements|in|instanceof|interface|native|new|null|private|protected|prototype|public|return|static|super|switch|synchronized|throw|throws|this|transient|true|try|typeof|var|volatile|while|with)\b/g, "sh_keyword", -1], [/(\+\+|--|\)|\])(\s*)(\/=?(?![*\/]))/g, ["sh_symbol", "sh_normal", "sh_symbol"], -1], [/(0x[A-Fa-f0-9]+|(?:[\d]*\.)?[\d]+(?:[eE][+-]?[\d]+)?)(\s*)(\/(?![*\/]))/g, ["sh_number", "sh_normal", "sh_symbol"], -1], [/([A-Za-z$_][A-Za-z0-9$_]*\s*)(\/=?(?![*\/]))/g, ["sh_normal", "sh_symbol"], -1], [/\/(?:\\.|[^*\\\/])(?:\\.|[^\\\/])*\/[gim]*/g, "sh_regexp", -1], [/\b[+-]?(?:(?:0x[A-Fa-f0-9]+)|(?:(?:[\d]*\.)?[\d]+(?:[eE][+-]?[\d]+)?))u?(?:(?:int(?:8|16|32|64))|L)?\b/g, "sh_number", -1], [/"/g, "sh_string", 10], [/'/g, "sh_string", 11], [/~|!|%|\^|\*|\(|\)|-|\+|=|\[|\]|\\|:|;|,|\.|\/|\?|&|<|>|\|/g, "sh_symbol", -1], [/\{|\}/g, "sh_cbracket", -1], [/\b(?:Math|Infinity|NaN|undefined|arguments)\b/g, "sh_predef_var", -1], [/\b(?:Array|Boolean|Date|Error|EvalError|Function|Number|Object|RangeError|ReferenceError|RegExp|String|SyntaxError|TypeError|URIError|decodeURI|decodeURIComponent|encodeURI|encodeURIComponent|eval|isFinite|isNaN|parseFloat|parseInt)\b/g, "sh_predef_func", -1], [/\b(?:applicationCache|closed|Components|content|controllers|crypto|defaultStatus|dialogArguments|directories|document|frameElement|frames|fullScreen|globalStorage|history|innerHeight|innerWidth|length|location|locationbar|menubar|name|navigator|opener|outerHeight|outerWidth|pageXOffset|pageYOffset|parent|personalbar|pkcs11|returnValue|screen|availTop|availLeft|availHeight|availWidth|colorDepth|height|left|pixelDepth|top|width|screenX|screenY|scrollbars|scrollMaxX|scrollMaxY|scrollX|scrollY|self|sessionStorage|sidebar|status|statusbar|toolbar|top|window)\b/g, "sh_predef_var", -1], [/\b(?:alert|addEventListener|atob|back|blur|btoa|captureEvents|clearInterval|clearTimeout|close|confirm|dump|escape|find|focus|forward|getAttention|getComputedStyle|getSelection|home|moveBy|moveTo|open|openDialog|postMessage|print|prompt|releaseEvents|removeEventListener|resizeBy|resizeTo|scroll|scrollBy|scrollByLines|scrollByPages|scrollTo|setInterval|setTimeout|showModalDialog|sizeToContent|stop|unescape|updateCommands|onabort|onbeforeunload|onblur|onchange|onclick|onclose|oncontextmenu|ondragdrop|onerror|onfocus|onkeydown|onkeypress|onkeyup|onload|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|onpaint|onreset|onresize|onscroll|onselect|onsubmit|onunload)\b/g, "sh_predef_func", -1], [/(?:[A-Za-z]|_)[A-Za-z0-9_]*(?=[ \t]*\()/g, "sh_function", -1]], [[/$/g, null, -2], [/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g, "sh_url", -1], [/<\?xml/g, "sh_preproc", 2, 1], [/<!DOCTYPE/g, "sh_preproc", 4, 1], [/<!--/g, "sh_comment", 5], [/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g, "sh_keyword", -1], [/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g, "sh_keyword", 6, 1], [/&(?:[A-Za-z0-9]+);/g, "sh_preproc", -1], [/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g, "sh_keyword", -1], [/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g, "sh_keyword", 6, 1], [/@[A-Za-z]+/g, "sh_type", -1], [/(?:TODO|FIXME|BUG)(?:[:]?)/g, "sh_todo", -1]], [[/\?>/g, "sh_preproc", -2], [/([^=" \t>]+)([ \t]*)(=?)/g, ["sh_type", "sh_normal", "sh_symbol"], -1], [/"/g, "sh_string", 3]], [[/\\(?:\\|")/g, null, -1], [/"/g, "sh_string", -2]], [[/>/g, "sh_preproc", -2], [/([^=" \t>]+)([ \t]*)(=?)/g, ["sh_type", "sh_normal", "sh_symbol"], -1], [/"/g, "sh_string", 3]], [[/-->/g, "sh_comment", -2], [/<!--/g, "sh_comment", 5]], [[/(?:\/)?>/g, "sh_keyword", -2], [/([^=" \t>]+)([ \t]*)(=?)/g, ["sh_type", "sh_normal", "sh_symbol"], -1], [/"/g, "sh_string", 3]], [[/$/g, null, -2]], [[/\*\//g, "sh_comment", -2], [/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g, "sh_url", -1], [/<\?xml/g, "sh_preproc", 2, 1], [/<!DOCTYPE/g, "sh_preproc", 4, 1], [/<!--/g, "sh_comment", 5], [/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g, "sh_keyword", -1], [/<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g, "sh_keyword", 6, 1], [/&(?:[A-Za-z0-9]+);/g, "sh_preproc", -1], [/<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g, "sh_keyword", -1], [/<(?:\/)?[A-Za-z][A-Za-z0-9]*/g, "sh_keyword", 6, 1], [/@[A-Za-z]+/g, "sh_type", -1], [/(?:TODO|FIXME|BUG)(?:[:]?)/g, "sh_todo", -1]], [[/\*\//g, "sh_comment", -2], [/(?:<?)[A-Za-z0-9_\.\/\-_~]+@[A-Za-z0-9_\.\/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g, "sh_url", -1], [/(?:TODO|FIXME|BUG)(?:[:]?)/g, "sh_todo", -1]], [[/"/g, "sh_string", -2], [/\\./g, "sh_specialchar", -1]], [[/'/g, "sh_string", -2], [/\\./g, "sh_specialchar", -1]]];


    sh_highlightDocument();

    $('#artVersion').html(art.dialog.version || '');

// 运行代码
    $.prototype.runCode = function () {
        var getText = function (elems) {
            var ret = "", elem;

            for (var i = 0; elems[i]; i++) {
                elem = elems[i];
                if (elem.nodeType === 3 || elem.nodeType === 4) {
                    ret += elem.nodeValue;
                } else if (elem.nodeType !== 8) {
                    ret += getText(elem.childNodes);
                }
                ;
            }
            ;

            return ret;
        };

        var code = getText(this);

        try {
            new Function(code).call(window);
        } catch (e) {
            window.console && console.error(e);
        }
        ;

        return this;
    };

// 代码运行按钮
    var runCodeBtn = function (event) {
        var target = event.target,
                type = event.type,
                $target = $(target);

        if (!target.nodeName === 'A' || !$target.hasClass('runCode')) {
            return;
        }
        ;

        var code = target.getAttribute('href', 2);
        var $code = $(code);


        if (type === 'click') {
            $code.runCode();
        } else if (type === 'mouseover') {

            clearTimeout(target.timer);
            $code.addClass('select');

        } else if (type === 'mouseout') {

            target.timer = setTimeout(function () {
                $code.removeClass('select');
            }, 300);
        }
        ;


        return false;
    };
    $(document).bind('click', runCodeBtn);
    $(document).bind('mouseover', runCodeBtn);
    $(document).bind('mouseout', runCodeBtn);


// 异步加载 js
    $.getScript = $.getScript || function (url, callback) {

                var query = arguments[2] || '';
                var ts = +new Date;
                var ret = url.replace(/([?&])_=[^&]*/, "$1_=" + ts);


                url = ret + ((ret === url) ? (/\?/.test(url) ? '&' : '?') + '_=' + ts : '');
                url = url + query;

                var head = document.head || document.getElementsByTagName('head')[0];
                var script = document.createElement('script');


                script.async = 'async';


                script.onload = script.onreadystatechange = function () {

                    var isReady = !script.readyState
                            || /loaded|complete/.test(script.readyState);

                    if (isReady) {

                        script.onload = script.onreadystatechange = null;
                        head.removeChild(script);

                        callback && callback();
                    }
                    ;

                };

                script.src = url;
                head.appendChild(script);
            };

    $('#plugins-demos').hide();
    $('#getPlugins').bind('click', function () {
        var that = this,
                url = './source/artDialog.plugins.js';

        that.disabled = true;

        $.getScript(url, function () {
            //$.alert(url + ' 插件加载成功！');
            that.innerHTML = '插件已加载';
            $('#plugins-demos').show();
        });

        return false;
    })[0].disabled = false;


// 皮肤演示
    var skinDialog = art.dialog({
        id: 'dialog-skins-demo',
        title: '皮肤演示',
        content: $('#skins')[0],
        fixed: true,
        initialize: function () {
            this.hidden();
        },
        beforeunload: function () {
            this.hidden();
            return false;
        }
    });

    var getDemoStyle = function (skin) {
        $('#artDialog-skin')[0].href = 'skins/' + skin + '.css?' + +new Date;
        skinDialog.hidden();
        setTimeout(function () {
            skinDialog.visible();
            $('#showSkinDialog')[0].innerHTML = skin;
        }, 150);
    };

    $('#skins-list').bind('click', function (event) {
        var target = event.target;
        var skin = target.innerHTML;

        if (target.nodeName === 'A') {
            getDemoStyle(skin);
            return false;
        }
        ;

    });

    $('#showSkinDialog').bind('click', function () {
        skinDialog.visible().zIndex();
        return false;
    });

    $('#showChange').bind('click', function () {
        $(document.body).addClass('showChange');
        this.disabled = true;
        this.innerHTML += '-已设置!';
        return false;
    })[0].disabled = false;


// 打印按钮
    $('#print').bind('click', function () {
        print();
        return false;
    });


//]]>
})();</script>
<script type="text/javascript">
    //<![CDATA[

    // google-analytics
    var _gaq = _gaq || [];

    _gaq.push(['_setAccount', 'UA-19823759-2']);
    _gaq.push(['_setDomainName', '.planeart.cn']);
    _gaq.push(['_trackPageview']);

    (function () {

        var ga = document.createElement('script');
        ga.type = 'text/javascript';
        ga.async = true;

        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ga, s);

    })();
    //]]>
</script>
</body>
</html>